<template>
  <div class="content">
      <!-- 表格 -->
      <el-table :data="tableData"  style="width: 98%" border :header-cell-style="{'background': 'black','color': 'white'}">
      <el-table-column label="任务描述" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.gzms }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" width="100" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
              <el-tag size="medium" class="custom-tag" :style="{ backgroundColor: getBackgroundColor(scope.$index) }">{{ scope.row.name }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column label="开始日期" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束日期" width="180" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进展" width="106" align="center">
        <template slot-scope="scope">
          <el-button class="custom-tag" style="color:white;" size="small" :type="scope.row.jc == '进行中' ? 'danger' : scope.row.jc == '待启动' ? 'primary' : 'danger'" round>{{ scope.row.jc }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="任务进度" width="150" align="center">
        <template slot-scope="scope">
          <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.jd"></el-progress>
        </template>
      </el-table-column>
      <el-table-column label="交付物" width="160" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-upload2" size="small">上传</el-button>
          <el-button type="text" icon="el-icon-download" size="small">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="任务状态" width="110" align="center">
        <template slot-scope="scope">
          <el-button class="custom-tag" style="color:white;" size="small" :type="scope.row.zt == '进度正常' ? 'success' : scope.row.zt == '高风险' ? 'danger' : 'warning'" round>{{ scope.row.zt }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="是否完成" width="110" align="center">
        <template slot-scope="scope">
          <el-button class="custom-tag" style="color:white;" size="small" :type="scope.row.isFinish == '是' ? 'success' : 'danger'" round>{{ scope.row.isFinish }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
        {
          gzms:"任务主页",
          name: "王小虎",
          startTime: "2016-05-02",
          endTime:"2016-05-02",
          jc:"进行中",
          jd:80,
          zt: "进度正常",
          isFinish:"否"
        },
        {
          gzms:"任务创建",
          name: "王小虎",
          startTime: "2016-05-04",
          endTime:"2016-05-02",
          jc:"进行中",
          jd:60,
          zt: "进度正常",
          isFinish:"否"
        },
        {
          gzms:"任务创建",
          name: "王小虎",
          startTime: "2016-05-01",
          endTime:"2016-05-02",
          jc:"进行中",
          jd:90,
          zt: "进度正常",
          isFinish:"否"
        },
        {
          gzms:"红灯任务",
          name: "王小虎",
          startTime: "2016-05-03",
          endTime:"2016-05-02",
          jc:"进行中",
          jd:0,
          zt: "高风险",
          isFinish:"否"
        },
        {
          gzms:"任务填报",
          name: "王小虎",
          startTime: "2016-05-03",
          endTime:"2016-05-02",
          jc:"待启动",
          jd:0,
          zt: "高风险",
          isFinish:"否"
        },
        {
          gzms:"任务意见",
          name: "王小虎",
          startTime: "2016-05-03",
          endTime:"2016-05-02",
          jc:"待启动",
          jd:0,
          zt: "高风险",
          isFinish:"否"
        },
        {
          gzms:"任务创建",
          name: "王小虎",
          startTime: "2016-05-03",
          endTime:"2016-05-02",
          jc:"待启动",
          jd:0,
          zt: "低风险",
          isFinish:"否"
        },
        {
          gzms:"更多",
          name: "王小虎",
          startTime: "2016-05-03",
          endTime:"2016-05-02",
          jc:"待启动",
          jd:0,
          zt: "低风险",
          isFinish:"否"
        },
      ]
      }
    },
    methods:{
      // 按钮添加颜色
      getBackgroundColor(index) {
        const colors = ['#B4FDFF', '#CEE7FF', '#75F9FD', '#FFBF6C','#CEE7FF'];
        return colors[index % colors.length];
      },
    }
  }
</script>

<style lang="less" scoped>
.content {
  margin-left:20px;
  margin-bottom: 15px;
}
// 表格样式
// 表格样式
.custom-tag {
  box-shadow:
        3px 2px 3px rgba(192, 192, 192, 0.08), /* 右下方向阴影 */
        -3px 2px 3px rgba(192, 192, 192, 0.08), /* 左下方向阴影 */
        3px -2px 3px rgba(192, 192, 192, 0.08), /* 右上方向阴影 */
        -3px -2px 3px rgba(192, 192, 192, 0.08); /* 左上方向阴影 */
  transition: box-shadow 0.01s ease;
  border-radius: 10px;
  color: black;
  border: none;
}
</style>
